
<template>
  <div class="app-container">
    <el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-row style="padding-top: 20px">
            <div>
              <el-col :span="18">
                <Form ref="topSearchForm" :model="searchParams" inline>
                  <FormItem label="">
                    <span class="form-font">搜索:</span>
                    <Input v-model="searchParams.search" clearable placeholder="请输入集群名称" style="width: 200px" suffix-icon="el-icon-search" type="text" />
                  </FormItem>
                  <FormItem label="">
                    <span class="form-font">DB类型:</span>
                    <el-select v-model="searchParams.db_type" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in dbTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
                    </el-select>
                  </FormItem>
                  <FormItem label="">
                    <span class="form-font">操作类型:</span>
                    <el-select v-model="searchParams.order_type" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in orderTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
                    </el-select>
                  </FormItem>
                </Form>
              </el-col>
              <!-- <el-col align="right" :span="6">
                <a @click="addDmlOrder"> <i class="el-icon-circle-plus"></i>&nbsp;&nbsp;添加DML变更 </a>
                <a @click="addDdlOrder"> <i class="el-icon-circle-plus"></i>&nbsp;&nbsp;添加DDL变更 </a>
                <a @click="addQueryOrder"> <i class="el-icon-circle-plus"></i>&nbsp;&nbsp;添加Query查询 </a>
              </el-col> -->
            </div>
          </el-row>
          <page-table
            height="200"
            :columns="orderColumns"
            :data="orderDatas.data"
            :loading="orderLoading"
            :max-height="orderMaxHeight"
            :pagination="orderPagination"
            border
            size="small"
            stripe
            @on-change="onTableChange"
          ></page-table>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import PageTable from '@/components/PageTable/PageTable'
import { getTicketOrderListByPage } from '@/api/ticket/order'
import { orderColumns, orderTypeChoice, dbTypeChoice } from '@/views/ticket/order/config'
import { getParams } from '@/libs/table'
import { snakeCaseObject } from '@/libs/object'
import checkPermission from '@/utils/permission'
import store from '@/store'

export default {
  name: 'Order',
  components: { PageTable },
  data() {
    return {
      ordersList: [],
      sorter: {},
      pageSize: 15,
      pageNum: 1,
      orderLoading: false,
      orderMaxHeight: 700,
      orderTypeChoice: [],
      dbTypeChoice: [],
      orderColumns: [],
      orderDatas: [],
      searchParams: {
        name: '',
        db_type: '',
        order_type: ''
      },
      action: {
        title: '创建',
        type: 'create'
      },
      showOrderDeleteModal: false,
      showOrderLogDrawer: false,
      showOrderActionModal: false
    }
  },
  computed: {
    username() {
      return this.$store.getters.username
    },
    orderPagination() {
      const { total, pageNum: current, pageSize } = this.orderDatas
      return {
        total,
        current,
        pageSize
      }
    },
    requestParams() {
      const params = getParams(this)
      if (this.searchParams.search) {
        params['search'] = this.searchParams.search
      }
      if (this.searchParams.db_type) {
        params['db_type'] = this.searchParams.db_type
      }
      if (this.searchParams.order_type) {
        params['order_type'] = this.searchParams.order_type
      }
      params['create_by'] = this.username
      return params
    }
  },

  watch: {
    requestParams() {
      this.debouncedGetTicketOrderData()
    },
    searchParams: {
      handler(newName, oldName) {
        this.pageNum = 1
      },
      deep: true
    }
  },
  created() {
    this.debouncedGetTicketOrderData = this.$lodash.debounce(this.getTicketOrderListByPage, 500)
  },
  mounted() {
    this.orderColumns = orderColumns(this)
    this.orderTypeChoice = orderTypeChoice
    this.dbTypeChoice = dbTypeChoice
    this.debouncedGetTicketOrderData()
  },
  methods: {
    checkPermission,
    setInitModelInfo() {
      this.searchParams = {
        name: '',
        search: '',
        type: '',
        create_by: store.getters.userName
      }
    },
    onTableChange(pagination, filters, sorter) {
      const { current: pageNum, pageSize } = pagination
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.sorter = sorter
    },
    addDmlOrder() {},
    addDdlOrder() {},
    addQueryOrder() {},
    setConfirmOrderModal(val) {
      this.showConfirmOrderModal = val['status']
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'delete')) {
        this.getOrderPageList()
      }
    },

    setOrderActionModal(val) {
      this.showOrderActionModal = val['status']
      if (val['status']) {
        this.orderInfo = {}
        this.action = {
          title: '创建',
          type: 'create'
        }
      }
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'create')) {
        this.getTransferOrderListByPage()
      }
    },
    async getTicketOrderListByPage() {
      this.orderLoading = true
      const { data } = await getTicketOrderListByPage(snakeCaseObject(this.requestParams))
      this.orderDatas = data
      this.orderLoading = false
    }
  }
}
</script>

<style>
.tree {
  overflow: auto;
  max-height: 1000px;
  margin-top: 20px;
}
.el-tree {
  min-width: 100%;
  display: inline-block;
}
.form-font {
  color: #515a6e;
  line-height: 32px;
  font-size: 13px;
  padding-right: 10px;
}
</style>
